<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container"></div>
<script>
  // 普通渲染
  // const total = 100000;
  // const start = Date.now();
  // for (let i = 0;i < total;i++) {
  //   const domLi = document.createElement('li');
  //   domLi.innerHTML = i;
  //   container.append(domLi);
  // }
  // setTimeout(() => {
  //   const end = Date.now();
  //   console.log(end - start);
  // }, 0);

  // 分片渲染 requestIdleCallback
  // const total = 100000;
  // let start = 0;
  // let end = 9;
  // const step = 1000;
  // const task = (start, end) => {
  //   for (let i = start;i < end;i++) {
  //     const domLi = document.createElement('li');
  //     domLi.innerHTML = i;
  //     container.append(domLi);
  //   }
  // }
  // const next = (idle) => {
  //   if (end <= total && idle.timeRemaining() > 1) {
  //     task(start, end);
  //     start = end;
  //     end = end + step > total ? total : end + step;
  //   }
  //   window.requestIdleCallback(next);
  // }
  // window.requestIdleCallback(next)

  // 分片渲染 requestAnimationFrame 或 setTimeout
  const total = 100000;
  let start = 0;
  let end = 20;
  let step = 1000;
  const task = (start, end) => {
    for (let i = start;i < end;i++) {
      const domLi = document.createElement('li');
      domLi.innerHTML = i;
      container.append(domLi);
    }
    start = end;
    end = end + step > total ? total : end + step;
    if (end <= total) {
      // setTimeout(() => {
      //   task(start, end);
      // }, 0);
      requestAnimationFrame(() => {
        task(start, end);
      })
    }
  }
  task(start, end);
</script>
</body>
</html>